<div class="tabPanel" data-dojo-attach-point="createAreaContainer">
  
    <div class="controls">

        <div class="controlGroup">
          <label>${nls.GRGLayerName}</label>
          <div class="controlItem">
            <input class="jimu-input textInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="addGRGName"
               data-dojo-props="regExp:'[a-zA-Z0-9_]*', invalidMessage:'${nls.invalidGRGLayerName}', missingMessage:'${nls.missingGRGLayerName}'" required="true"></input>
          </div>
        </div>
        
        <div class="controlGroup" data-dojo-attach-point="addGRGArea">      
          <div class="controlItem">
            <div class='add-with-icon'>
                <div title="${nls.addPointToolTip}" class="draw" data-dojo-attach-point="addGRGAreaBtn"></div>
            </div>
            <label class="paddedTop">${nls.polygonDrawLabel}</label>
          </div>
        </div>
        
        <div class="controlGroupHidden" data-dojo-attach-point="deleteGRGArea">
          <div class="controlItem">
            <div class="deleteBtn" data-dojo-attach-point="deleteGRGAreaBtn"></div>
            <label class="paddedTop">${nls.removeGRGLabel}</label>
          </div>
        </div>

        <div class="controlGroup">
          <label>${nls.cellWidth}</label>
          <div class="controlItem">
            <input class="jimu-input dijitNumberTextBox" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='constraints:{min:0},
              invalidMessage:"${nls.invalidNumberMessage}",
              required: true,
              rangeMessage:"${nls.invalidRangeMessage}"' data-dojo-attach-point="cellWidth" value="1000" ></input>
          </div>
        </div>
        
        <div class="controlGroup">
          <label>${nls.cellHeight}</label>
          <div class="controlItem">
            <input class="jimu-input dijitNumberTextBox" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='constraints:{min:0},
              invalidMessage:"${nls.invalidNumberMessage}",          
              required: true,
              rangeMessage:"${nls.invalidRangeMessage}"' data-dojo-attach-point="cellHeight" value="1000"></input>
          </div>
        </div>
        
        <div class="controlGroup">
          <label>${nls.cellShape}</label>
          <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="cellShape" >
              <option selected="selected"  value="default">${nls.choiceDefault}</option>
              <option value="hexagon">${nls.choiceHexagon}</option>
          </select> 
        </div>
        
        <div class="controlGroup">
          <label>${nls.cellUnits}</label>
          <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="cellUnits" >
              <option value="feet">${nls.feet}</option>
              <option value="kilometers">${nls.kilometers}</option>
              <option value="miles">${nls.miles}</option>
              <option value="meters" selected="selected">${nls.meters}</option>
              <option value="nautical-miles">${nls.nauticalMiles}</option>
              <option value="yards">${nls.yards}</option>
          </select> 
        </div>
        
        <div class="controlGroup">
          <label>${nls.labeling}</label>
          <div class="controlItem">
            <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="labelStartPosition" >
              <option selected="selected" value="Lower-Left">${nls.lowerLeft}</option>
              <option value="Lower-Right">${nls.lowerRight}</option>
              <option value="Upper-Left">${nls.upperLeft}</option>
              <option value="Upper-Right">${nls.upperRight}</option>
            </select>
            <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="labelStyle" >
              <option selected="selected" value="Alpha-Numeric">${nls.alphaNumeric}</option>
              <option value="Alpha-Alpha">${nls.alphaAlpha}</option>
              <option value="Numeric">${nls.numeric}</option>
            </select>
          </div>
        </div>        
    </div>
      
    <div class="buttonContainer">
        <div class='jimu-btn' data-dojo-attach-point='createGRGButton'>${nls.createGRGBtn}</div>
        <div class='jimu-btn controlGroupHidden' data-dojo-attach-point='saveGRGButton'>${nls.publishGRGBtn}</div>
    </div>  
</div>
